<template>
	<view>
		<view class="pay-model" v-if="showModel" >
			<view class="mask" @click="showModel = false"></view>
			<view class="goods-list">
				<view class="top">
					<text>已选商品</text>
					<text class="iconfont icon-shanchu" @click="cleanPaycar">清空购物车</text>
				</view>
				
				<view class="goods-item" v-for="item in 6">
					<image src="https://img0.baidu.com/it/u=2013870474,3178045937&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1713632400&t=9fba827954c003c530a894f153217a10" class="cover"/>
					<view class="content">
						<view class="name">探索.认知迭代探索.认知迭代探索.认知迭代探索.认知迭代探索.认知迭代探索.认知迭代</view>
						<view class="times">5月8日</view>
						<view class="foot">
							<view class="price1">￥800</view>
							<view class="price2">￥11800</view>
							<view class="count-tool">
								<view class="sub">-</view>
								<view class="count">1</view>
								<view class="add active">+</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="paycar-bar">
			<view class="paycar-btn" @click="showModel = true">
				<text class="iconfont icon-24gl-bag"></text>
				<text>购物袋</text>
				<view class="count">1</view>
			</view>
			<view class="price-wapper">
				<view class="current-price">800</view>
				<view class="pre-price">11800</view>
			</view>
			<view class="pay-btn">去结账</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const showModel = ref(false)
	
	const cleanPaycar = ()=> {
		uni.showModal({
			title: '提示',
			content: '确认清空购物车?',
			showCancel: true,
			success(res){
				
			}
		})
	}
</script>

<style lang="scss" scoped>
	.pay-model{
		
		height: calc(100vh - 120rpx);
		width: 100vw;
		z-index: 999;
		position: fixed;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.mask{
			flex: 1;
			background: rgba(0, 0, 0, 0.4);
		}
		.goods-list{
			width: 100vw;
			background: #fff;
			max-height: 70vh;
			overflow: scroll;
			position: relative;
			.top{
				padding: 14rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: sticky;
				width: 100vw;
				top: 0;
				z-index: 999;
				background: #fff;
				text{
					font-size: 28rpx;
					color: #333333;
				}
			}
			.goods-item{
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				margin: 10rpx 0;
				.cover{
					width: 140rpx;
					height: 140rpx;
					border-radius: 14rpx;
				}
				.content{
					height: 140rpx;
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-left: 20rpx;
					.name{
						width: 540rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.times{
						color: #787878;
						font-size: 24rpx;
					}
					.foot{
						display: flex;
						align-items: center;
						.price1{
							font-weight: bold;
							font-size: 32rpx;
						}
						.price2{
							color: #787878;
							font-size: 26rpx;
							text-decoration-line: line-through;
						}
						.count-tool{
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: flex-end;
							.count{
								margin: 0 20rpx;
								color: #9f9f9f;
							}
							.sub, .add{
								height: 38rpx;
								width: 38rpx;
								border-radius: 50%;
								border: 4rpx solid #9f9f9f;
								display: flex;
								align-items: center;
								justify-content: center;
								color: #9f9f9f;
								font-weight: bold;
								box-sizing: border-box;
							}
							.active{
								border: none;
								background: #5985D0;
								color: #fff;
							}
						}
					}
				}
			}
		}
	}
	
	.paycar-bar{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #F7F7F7;
		height: 120rpx;
		// box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(0, 0, 0, 0.2); 
		display: flex;
		align-items: center;
		.paycar-btn{
			height: 90rpx;
			background: #fff;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 30rpx;
			margin-left: 20rpx;
			box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(0, 0, 0, 0.2), 
			2rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.2);
			position: relative;
			.count{
				border-radius: 50%;
				color: #fff;
				background: #5985D0;
				width: 40rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				position: absolute;
				top: -10rpx;
				right: -8rpx;
			}
		}
		.price-wapper{
			margin-left: auto;
			justify-content: space-around;
			padding-right: 22rpx;
			.current-price{
				color: #333333;
				font-size: 36rpx;
				&:before{
					content: '￥';
					font-size: 24rpx;
				}
			}
			.pre-price{
				font-size: 24rpx;
				text-decoration-line: line-through;
				color: #787878;
				&:before{
					content: '￥';
					font-size: 22rpx;
				}
			}
		}
		.pay-btn{
			width: 200rpx;
			height: 100%;
			text-align: center;
			line-height: 118rpx;
			background: #5985D0;
			color: #fff;
		}
	}
</style>